import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { actions, getCartlist, getCartadd,getCartdelete} from "../../store/modules/shop";
import { bindActionCreators } from "redux";
import "./shop.css";
import '../../assets/css/shop11.css'


class Shop extends PureComponent {
   
  render() {
    let { cartlist,shop:{reqCartadd,reqCartdelete} } = this.props;
    console.log(reqCartdelete);
    return (
      <div className="pad">
        <ul className="shop_nav">
          <li>
            全部(20)
            <span></span>
          </li>
          <li>
            降价(4)
            <span></span>
          </li>
          <li>
            常卖(2)
            <span></span>
          </li>
          <li>
            分类
            <span></span>
          </li>
        </ul>
        <div className="shop_content">
          <div>
            {cartlist[1]? cartlist[1].content.map((item) => (
            <div key={item.id}>
              <input type="checkbox" />
              <img src={item.img} alt="" />
              <ul>
            <li>{item.goodsname}</li>
                <li className="clearfix">
                  <div className="fl">
                    <span>￥{item.price}</span>
                    <span>￥1099</span>
                  </div>
                  <div className="fr">
                    <div className="fl">-</div>
                    <i className="fl">{item.num}</i>
                    <div
                      className="fl" onClick={() => reqCartadd(item.goodsid)}
                    >
                      +
                    </div>
                  </div>
                </li>
                <li>
                  <button onClick={() => reqCartdelete(item.id)}>删除</button>
                  
                </li>
              </ul>
            </div>
                ))
              : null}
          </div>
        </div>
        <div className="bottom1 clearfix">
          <div className="fl">
            <input type="checkbox" />  
            {/* onChange={() => allcheck(true)}  */}
            <span>全选</span>
          </div>
          <ul className="fr clearfix">
            <li className="fr">
              <input type="button" value="结算" />
            </li>
            <li className="fr">
              <p></p>
              <p>已优惠￥200元</p>
            </li>
            <li className="fr">
              <p>合计</p>
              <p>已免运费</p>
            </li>
          </ul>
        </div>
      </div>
       
    );
  }
  componentDidMount() {
    let { reqCartlist} = this.props.shop;
    reqCartlist();
    
  }
}
//收数据
let mapStateToProps = (state) => ({
  cartlist: getCartlist(state),
  
});
//收方法
let mapDispatchToProps = (dispatch) => ({
  shop: bindActionCreators(actions, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(Shop);
